import { useState, useEffect, useContext, useRef } from 'react'
import PanelRight from '../../../../../../common/PanelRight';
import BlockTitle from '../../../../../../framework/BlockTitle';
import { Button } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import BlockBody from '../../../../../../framework/BlockBody';
import useMap from '../../hooks/useMap';
import BlockPanel from '../BlockPanel';
import BusinessCenterContext from '../../BusinessCenterContext';
export default function DetailPanel(props) {

    const [detailItem, setDetailItem] = useState();
    const [detailItem2, setDetailItem2] = useState();
    const [detailItem3, setDetailItem3] = useState();
    const [fixedItem, setFixedItem] = useState();
    const map = useMap();
    const { module } = useContext(BusinessCenterContext);
    const firstLoadRef = useRef(true)
    useEffect(() => {
        if (module && !firstLoadRef.current) {
            setFixedItem(null);
            setDetailItem(null);
            setDetailItem2(null);
            setDetailItem3(null);
        } else {
            firstLoadRef.current = false
        }
    }, [module])

    useEffect(() => {
        map.on('detail.show', (evt) => {
            setDetailItem(evt);
        })
        map.on('detail.show2', (evt) => {
            setDetailItem2(evt);
        })
        map.on('detail.show3', (evt) => {
            setDetailItem3(evt);
        })
        map.on('fixed.item.show', (evt) => {
            setFixedItem(evt);
        })
    }, [map])

    useEffect(() => {
        setDetailItem(null);
        setDetailItem2(null);
        setDetailItem3(null);
    }, [fixedItem])

    useEffect(() => {
        setDetailItem2(null);
        setDetailItem3(null);
    }, [detailItem])

    useEffect(() => {
        setDetailItem3(null);
    }, [detailItem2])

    useEffect(() => {
        map && map.dispatchEvent({
            type: 'right-panel',
            show: fixedItem || detailItem || detailItem2 || detailItem3
        })
    }, [map, detailItem, detailItem2, detailItem3, fixedItem])

    return <>
        {
            fixedItem ? <PanelRight mix style={{
                display: (detailItem || detailItem2 || detailItem3) ? 'none' : 'flex'
            }}>
                <BlockPanel className="h100" title={fixedItem?.title}>
                    {fixedItem?.component}
                </BlockPanel>
            </PanelRight> : null
        }
        {
            detailItem ? <PanelRight mix style={{
                display: (detailItem2 || detailItem3) ? 'none' : 'flex'
            }}>
                <BlockPanel className="h100" title={detailItem?.title}>
                    <Button shape="circle" size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000",
                        position: "absolute",
                        right: 0,
                        top: 5
                    }} onClick={e => {
                        setDetailItem(null)
                    }} />
                    {detailItem?.component}
                </BlockPanel>
            </PanelRight> : null
        }
        {
            detailItem2 ? <PanelRight mix style={{
                zIndex: 20,
                display: (detailItem3) ? 'none' : 'flex'
            }}>
                <BlockPanel className="h100" title={<div className='layout-h center'>
                    <div className='fill w0'>{detailItem2?.title}</div>
                    <Button shape="circle" size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000",
                        position: "absolute",
                        right: 0,
                        top: 5
                    }} onClick={e => {
                        setDetailItem2(null)
                    }} />
                </div>}>
                    {detailItem2?.component}
                </BlockPanel>
            </PanelRight> : null
        }
        {
            detailItem3 ? <PanelRight mix style={{
                zIndex: 30,
            }}>
                <BlockPanel className="h100" title={<div className='layout-h center'>
                    <div className='fill w0'>{detailItem3?.title}</div>
                    <Button shape="circle" size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000",
                        position: "absolute",
                        right: 0,
                        top: 5
                    }} onClick={e => {
                        setDetailItem3(null)
                    }} />
                </div>}>
                    {detailItem3?.component}
                </BlockPanel>
            </PanelRight> : null
        }
    </>;
}